<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../css/vant.css">
    </link>
    <link rel="stylesheet" href="../css/index.css">
    </link>
    <script src="../lib/vue.min.js"></script>
    <script src="../lib/vant.min.js"></script>
    <script src="../lib/flexible.js"></script>
    <script src="../lib/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="s-bg">
            <van-nav-bar title="销售单" left-arrow @click-left="back">
                <img slot="left" :src="pic3" class="bar-img" />
            </van-nav-bar>
            <div class="input">
                <input type="text" placeholder="请输入主副卡号码搜索" v-model="searchText" />
                <img :src="pic2" alt="" />
                <div @click="search">搜索</div>
            </div>

            <div class="arrow">
                <div>
                    <span>全部订单</span>
                    <img :src="pic1" />
                </div>
                <div @click="showPicker">
                    <span>{{currentDate}}</span>
                    <img :src="pic1" alt="" />
                </div>
            </div>

            <div class="sale-item">
                <div class="pic"></div>
                <div class="left">
                    <span class="title">广州50Mbps宽带+电视服务</span>
                    <div class="status">
                        <span>支付处理中</span>
                        <span>未上传照片</span>
                    </div>
                    <span class="orderid">订单号：92943585868612<span>2020-10-11</span></span>
                    <div class="btns">
                        <div>查看</div>
                        <div>上传证件照</div>
                    </div>
                </div>
            </div>

            <div class="sale-layer" v-if="isShowPicker">
                <div class="sale-layer-content">
                    <van-datetime-picker type="year-month" class="sale-layer-picker" :show-toolbar="false" visible-item-count="3" @change="onChange"></van-datetime-picker>
                    <div class="sale-layer-sure" @click="selectTime">确定</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                pic3: "",
                pic2: "",
                pic1: "",
                currentDate: "202101",
                tempDate: "",
                isShowPicker: false,
                searchText: ""
            };
        },
        components: {},
        methods: {
            back() {
                // $("")
            },
            search() {
                // $.get(`xxx?key=${searchText}`);
            },
            showPicker() {
                this.isShowPicker = true
            },
            hidePicker() {
                this.isShowPicker = false
            },
            selectTime() {
                this.currentDate = this.tempDate;
                this.hidePicker()
            },
            onChange(e) {
                this.tempDate = `${e.getValues()[0]}${e.getValues()[1]}`
            },
        },
        watch: {},
        computed: {},
    })
</script>

</html>